<template>
	<view style="color: #fff;padding: 20rpx;">
		<view class="">
				<text class="u-demo-block__title title">本场最佳</text>
				<view class="container" style="height: 100%;">
					<view class="item left" style="text-align: right;">
						<view style="text-align: right; align-items: center; float: right;display: flex;">
							<view class="team_title">{{team_info.one_team.name}}</view>
							<u-avatar :src="team_info.one_team.logo" size="60"></u-avatar>
						</view>
					</view>
					<view class="item middle"></view>
					<view class="item right" style="text-align: left; align-items: center; display: flex;">
						<u-avatar :src="team_info.two_team.logo" size="60"></u-avatar>
						<view class="team_title">{{team_info.two_team.name}}</view>
					</view>
				</view>
				
				<view class="container" style="height: 100%;" v-for="item in team_best">
					<view class="item left" style="text-align: right;">
						<view class="" style="display: flex;">
							<view style="width: 75%;">
								<text class="scroll-text" style="color: gray;">{{item.one_name}}</text>
							</view>
							<view class="score">
								{{item.one_num}}
							</view>
						</view>
					</view>
					<view class="item middle" style="text-align: center;">
						<text>{{item.type}}</text>
					</view>
					<view class="item right" style="text-align: left;">
						<view class="" style="display: flex;">
							<view class="score" style="margin-left: -6rpx;">
								{{item.two_num}}
							</view>
							<view class="right-progress">
								<text class="scroll-text" style="color: gray;">{{item.two_name}}</text>
							</view>
						</view>
					</view>
				</view>
		</view>
		<view class="">
				<text class="u-demo-block__title title">技术分析</text>
				<view class="container" style="height: 100%;">
					<view class="item left" style="text-align: right;">
						<view style="text-align: right; align-items: center; float: right;display: flex;">
							<view class="team_title">{{team_info.one_team.name}}</view>
							<u-avatar :src="team_info.one_team.logo" size="60"></u-avatar>
						</view>
					</view>
					<view class="item middle"></view>
					<view class="item right" style="text-align: left; align-items: center; display: flex;">
						<u-avatar :src="team_info.two_team.logo" size="60"></u-avatar>
						<view class="team_title">{{team_info.two_team.name}}</view>
					</view>
				</view>
				
				<view class="container" style="height: 100%;" v-for="item in data">
					<view class="item left" style="text-align: right;">
						<view class="" style="display: flex;">
							<view class="left-progress">
								<u-line-progress :percent="calculatePercent(item.one_num, item.all_num)" activeColor="#00aaff" :round="false" :showPercent="false"></u-line-progress>
							</view>
							<view class="score">
								{{item.one_num}}
							</view>
						</view>
					</view>
					<view class="item middle" style="text-align: center;">
						<text>{{item.type}}</text>
					</view>
					<view class="item right" style="text-align: left;">
						<view class="" style="display: flex;">
							<view class="score" style="margin-left: -6rpx;">
								{{item.two_num}}
							</view>
							<view class="right-progress">
								<u-line-progress :percent="calculatePercent(item.two_num, item.all_num)" activeColor="#828282" :round="false" :showPercent="false"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script setup>
	
	const team_info = {
		"one_team": {
			"name": "独行侠",
			"logo": "/static/image/DallasMavericks.png"
		},
		"two_team": {
			"name": "马刺",
			"logo": "/static/image/SanAntonioSpurs.png"
		}
	}
	
	const team_best = [
		{
			"type": "得分",
			"one_name": "10-布兰登-威廉",
			"one_num": 19,
			"two_name": "4-福克斯",
			"two_num": 32
		},
		{
			"type": "助攻",
			"one_name": "31-汤普森",
			"one_num": 7,
			"two_name": "4-福克斯",
			"two_num": 11
		},
		{
			"type": "篮板",
			"one_name": "31-汤普森",
			"one_num": 4,
			"two_name": "24-瓦塞尔",
			"two_num": 10
		}
	]
	
	const data = [
		{
			"type": "得分",
			"one_num": 100,
			"two_num": 92,
			"all_num": 192
		},
		{
			"type": "篮板",
			"one_num": 31,
			"two_num": 47,
			"all_num": 78
		},
		{
			"type": "助攻",
			"one_num": 30,
			"two_num": 32,
			"all_num": 62
		},
		{
			"type": "抢断",
			"one_num": 8,
			"two_num": 11,
			"all_num": 19
		},
		{
			"type": "盖帽",
			"one_num": 0,
			"two_num": 2,
			"all_num": 2
		},
		{
			"type": "失误",
			"one_num": 17,
			"two_num": 16,
			"all_num": 33
		},
		{
			"type": "罚球",
			"one_num": 13,
			"two_num": 15,
			"all_num": 28
		},
		{
			"type": "三分",
			"one_num": 13,
			"two_num": 11,
			"all_num": 24
		},
	]
	
	// 百分比计算函数（确保数值安全）
	const calculatePercent = (num, total) => {
		return total === 0 ? 0 : (num / total) * 100;
	};
	
</script>

<style>
	.title {
		color: white;
		border-left: 3px solid white;
		padding-left: 6rpx;
	}

	.container {
		display: flex;
		width: 100%;
		margin: 20rpx 0;
	}

	.item {
		box-sizing: border-box; /* 确保边框不占用额外空间 */
	}

	.left {
		flex: 5;
	}

	.middle {
		flex: 1.5;
	}

	.right {
		flex: 5;
	}
	.team_title {
		/* border: 1px solid red; */
		padding: 0 10rpx;
		font-weight: bold;
		font-size: 16px;
		line-height: 48rpx;
	}

	.left-progress {
		width: 75%;
		transform: scaleX(-1);
	}
	.right-progress {
		width: 75%;
	}
	.score {
		width: 64rpx; 
		margin-left: 10rpx;
		text-align: center;
		/* border: 1px solid red; */
	}
</style>